<template>
  <van-nav-bar title="申请退货" left-arrow @click-left="onBack" />

  <div class="near-box">
    <div class="jd-qrdd-bigbox">
      <div class="jd-qrdd-a1">
        <span class="qrdd-a1-t1">{{ info.address.consignee }}</span>
        <span class="qrdd-a1-t1">{{ info.address.mobile }}</span>
        <span class="qrdd-a1-t2" v-if="info.address.status == 1">默认</span>
        <div class="qrdd-a1-b1">
          <span class="qrdd-a1-img1"></span>
          <span class="qrdd-a1-t3">{{ info.address.region_text }} {{ info.address.address }}</span>
        </div>
        <span class="qrdd-a1-img2"></span>
      </div>
      <!--商品部分-->
      <div class="zjzz-buylist-goods1">
        <div class="zjzz-buylist-gtime">
          <!-- <span class="zjzz-buylist-gtime1"><i class="indent-details-img2"></i>保洁官方旗舰店</span> -->
          <span class="zjzz-buylist-gtime2">{{ info.order.status_text }}</span>
        </div>
        <div class="zjzz-buylist-det" v-for="item of info.product" :key="item.id">
          <img :src="item.products.cover_cdn" />
          <div class="zjzz-buylist-gdetail">
            <span class="zjzz-buylist-gtit1">{{ item.products.name }}</span>
            <span class="zjzz-buylist-gmoney">
              <i class="zjzz-buylist-gm1">￥ {{ item.total }}</i>
              <i class="zjzz-buylist-gm2">x{{ item.pronum }}</i>
            </span>
          </div>
        </div>
      </div>

      <div>
        <van-field v-model="fieldValue" is-link readonly label="退货原因" placeholder="请选择退货原因" @click="showPicker = true" />
        <van-popup v-model:show="showPicker" round position="bottom">
          <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
        </van-popup>
      </div>
      <div style="height: 10px"></div>
      <div>
        <van-cell-group>
          <van-field
            rows="2"
            autosize
            label="补充证明："
            type="textarea"
            maxlength="200"
            placeholder="补充描述，有助于商家更好的处理售后问题"
            show-word-limit
          />
        </van-cell-group>
      </div>
      <div style="padding: 15px">
        <van-uploader v-model="fileList" :max-count="5" multiple :after-read="val => {}" @delete="val => {}" />
      </div>
    </div>
  </div>
  <div class="aui-flexView" style="width: 50%; margin-top: 10px; margin-bottom: 10px">
    <van-button type="primary" @click="ConfirmAfter()">申请提交</van-button>
  </div>
</template>

<script>
  import { showNotify, showToast } from 'vant'
  import { ref } from 'vue'
  export default {
    data() {
      return {
        orderid: 0,
        showPicker: false,
        info: {
          order: {},
          address: {},
          product: [],
        },
        columns: [
          { text: '不想要了', value: 'Huzho' },
          { text: '尺寸不符', value: 'Hangzhou' },
          { text: '质量不好', value: 'Ningbo' },
          { text: '不喜欢款式/颜色', value: 'Wenzhou' },
          { text: '收到错误的货', value: 'Shaoxing' },
          { text: '配送时间问题', value: 'Huzu' },
        ],
        fieldValue: '',
      }
    },
    setup() {
      const fileList = ref([
        // Uploader 根据文件后缀来判断是否为图片文件
      ])

      return {
        fileList,
      }
    },
    created() {
      this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0

      this.getOrderInfo()
    },
    methods: {
      onBack() {
        this.$router.go(-1)
      },
      async getOrderInfo() {
        let data = {
          orderid: this.orderid,
        }

        let result = await this.$api.OrderInfo(data)

        if (result.code === 0) {
          showNotify({
            type: 'warning',
            message: result.msg,
            onClose: () => {
              this.$router.go(-1)
            },
          })
        }

        // 商品信息，地址信息
        this.info = result.data
      },
      // 点击确认拿一个values过来
      onConfirm(values) {
        // 点击确认 关闭弹出窗口
        this.showPicker = false

        // 获取选中的值
        this.fieldValue = values.selectedOptions[0].text

        // console.log(this.fieldValue)
      },
      // 提交按钮
      async ConfirmAfter() {
        let data = {
          orderid: this.orderid,
        }
        console.log(data)
        let result = await this.$api.AfterSale(data)

        if (result.code === 1) {
          showNotify({
            type: 'success',
            message: result.msg,
            duration: 1500,
            onClose: () => {
              this.$router.go(-1)
            },
          })
        } else {
          showNotify({
            type: 'warning',
            message: result.msg,
            duration: 1500,
          })
        }
      },
    },
  }
</script>
<style>
  @import url('/assets/css/indent-details.css');

  .aui-flexView {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
</style>
